<template>
    <div>
        <cjcNav title="记录明细" @customRouter="customRouter"></cjcNav>
        <div class="reco-content">
            <headTime class="content-top" :time="time"></headTime>
            <!-- 明细详情 -->
            <div v-if="$store.state.WeekPlan">
                <div class="reco-notes">
                    <!-- 上午打卡计划 -->
                    <div class="notes-con">
                        <Row type='flex' align="middle">
                            <Col span=24>
                            <div class="content-item" v-if="paln[0].SIGN_STATUS !== 3">
                                <div class="item-date">上午</div>
                                <div class="item-note">
                                    <div class="itemNote-item">
                                        <div class="itemNote-itemLeft-d">计划：</div>
                                        <div class="itemNote-itemRight-d">
                                            <div>{{ paln[0].PLAN_TIME }}</div>
                                            <div>{{ paln[0].ADDRESS }}</div>
                                        </div>
                                    </div>
                                    <div class="itemNote-item">
                                        <div class="itemNote-itemLeft-d">实际：</div>
                                        <div class="itemNote-itemRight-d">
                                            <div v-if="paln[0].SIGN_STATUS === -1 || paln[0].SIGN_STATUS === -2" style="color: red">
                                                无效打卡
                                            </div>
                                            <div v-else-if="paln[0].SIGN_STATUS === 4" style="color: red">未打卡</div>
                                            <div v-else>{{ paln[0].SIGN_TIME }}</div>
                                            <div v-if="paln[0].SIGN_STATUS === -2 || paln[0].SIGN_STATUS === 2">{{ paln[0].ADDRESS }}</div>
                                        </div>
                                    </div>
                                    <div class="itemNote-item">
                                        <div class="itemNote-itemLeft-d">情况：</div>
                                        <div class="itemNote-itemRight-d">
                                            <div v-if="paln[0].SIGN_STATUS === 2 || paln[0].SIGN_STATUS === 1">{{ paln[0].TIME_COUNT }}小时</div>
                                                <div v-if="paln[0].SIGN_STATUS === -1">
                                                    无效打卡
                                                </div>
                                                <div v-if="paln[0].SIGN_STATUS === -2">
                                                    无效打卡
                                                </div>
                                                <div v-if="paln[0].SIGN_STATUS === 0">
                                                    未开始
                                                </div>
                                                <div v-if="paln[0].SIGN_STATUS === 3">
                                                    未设置打卡计划
                                                </div>
                                                <div v-if="paln[0].SIGN_STATUS === 4">
                                                    打卡时间已过
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </Col>
                        </Row>
                    </div>
                    <!-- 下午打卡计划 -->
                    <div class="notes-con">
                        <Row type='flex' align="middle">
                            <Col span=24>
                            <div class="content-item" v-if="paln[1].SIGN_STATUS !== 3">
                                <div class="item-date">下午</div>
                                <div class="item-note">
                                    <div class="itemNote-item">
                                        <div class="itemNote-itemLeft-d">计划：</div>
                                        <div class="itemNote-itemRight-d">
                                            <div>{{ paln[1].PLAN_TIME }}</div>
                                            <div>{{ paln[1].ADDRESS }}</div>
                                        </div>
                                    </div>
                                    <div class="itemNote-item">
                                        <div class="itemNote-itemLeft-d">实际：</div>
                                        <div class="itemNote-itemRight-d">
                                            <div v-if="paln[1].SIGN_STATUS === -1 || paln[1].SIGN_STATUS === -2" style="color: red">
                                                无效打卡
                                            </div>
                                            <div v-else-if="paln[1].SIGN_STATUS === 4" style="color: red">未打卡</div>
                                            <div v-else>{{ paln[1].SIGN_TIME }}</div>
                                            <div v-if="paln[1].SIGN_STATUS === -2 || paln[1].SIGN_STATUS === 2">{{ paln[1].ADDRESS }}</div>
                                        </div>
                                    </div>
                                    <div class="itemNote-item">
                                        <div class="itemNote-itemLeft-d">情况：</div>
                                        <div class="itemNote-itemRight-d">
                                            <div v-if="paln[1].SIGN_STATUS === 2 || paln[1].SIGN_STATUS === 1">{{ paln[1].TIME_COUNT }}小时</div>
                                                <div v-if="paln[1].SIGN_STATUS === -1">
                                                    无效打卡
                                                </div>
                                                <div v-if="paln[1].SIGN_STATUS === -2">
                                                    无效打卡
                                                </div>
                                                <div v-if="paln[1].SIGN_STATUS === 0">
                                                    未开始
                                                </div>
                                                <div v-if="paln[1].SIGN_STATUS === 3">
                                                    未设置打卡计划
                                                </div>
                                                <div v-if="paln[1].SIGN_STATUS === 4">
                                                    打卡时间已过
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="24">
                                <div class="item-mark" v-if="paln[2].REMARK_CONTENT !== ''">备注：
                                    <span>{{ paln[2].REMARK_CONTENT }}</span>
                                </div>
                                <div v-else>
                                     <div class="btn-mark" @click="changeModal(paln[2].DAY)">备注</div>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>
            <Modal
                v-model="modal"
                title="添加备注"
                @on-ok="ok">
                <Input v-model="beizhu" type="textarea" :rows="4" placeholder="最多输入60字符..." :maxlength="60"></Input>
            </Modal>
            <div class="card-nodata" v-if="nodata">
                <img src="static/daka/nodata.png">
                <div>暂无记录</div>
            </div>
        </div>
        <Spin size="large" style="position: fixed" fix v-if="loading"></Spin>
    </div>
</template>

<script>
export default {
    name: 'recordetail',
    data() {
        return {
            term: '',
            xuenian: '',
            xueqi: '',
            week: 1,
            loading: false,
            userTeaID: '',
            manID: '',
            nodata: false,
            paln: this.$store.state.WeekPlan.PLAN_LIST[this.$route.params.index],
            modal: false,
            day: '',
            isClick: false,
            beizhu: ''
        }
    },
    components: {
        cjcNav: () => import('../../components/common/Nav.vue'),
        headTime: () => import('../../components/common/headTime.vue')
    },
    computed: {
        time() {
            try {
                let zc = (() => {
                    switch (Number(this.$store.state.WeekPlan.PLAN_LIST[this.$route.params.index][0].WEEK)) {
                    case 1:
                        return '一'
                    case 2:
                        return '二'
                    case 3:
                        return '三'
                    case 4:
                        return '四'
                    case 5:
                        return '五'
                    case 6:
                        return '六'
                    case 7:
                        return '日'
                    }
                })()
                return `${this.$store.state.WeekPlan.PLAN_LIST[this.$route.params.index][2].DAY} 周${zc}`
            } catch (error) {
                return
            }
        }
    },
    filters: {
        setWeek(WEEK) {
            if (WEEK === 1) {
                return '星期一'
            }
            if (WEEK === 2) {
                return '星期二'
            }
            if (WEEK === 3) {
                return '星期三'
            }
            if (WEEK === 4) {
                return '星期四'
            }
            if (WEEK === 5) {
                return '星期五'
            }
            if (WEEK === 6) {
                return '星期六'
            }
            if (WEEK === 7) {
                return '星期日'
            }
        }
    },
    methods: {
        customRouter() {
            this.manID = sessionStorage.getItem('manId')
            this.$router.push({
                name: 'recordetail',
                params: {
                    week: this.$route.params.week
                }
            })
        },
        select() {
            let Vm = this
            async function setWeekPlan() {
                Vm.loading = true
                let WeekPlan = await Vm.$store.dispatch('getWeekPlan', {
                    userID: Vm.userTeaID,
                    XN: Vm.xuenian,
                    XQ: Vm.xueqi,
                    ZC: Vm.week,
                    flag: 1
                })
                Vm.$store.commit('SET_WeekPlan', WeekPlan.result)
                Vm.loading = false
            }
            setWeekPlan()
        },
        /**
         * 设置教学周
        */
        async setSchoolWeekList() {
            let SchoolWeekList = await this.$store.dispatch('getSchoolWeekList')
            this.$store.commit('SET_SchoolWeekList', SchoolWeekList.result)
            this.term = this.$store.state.SchoolWeek.XN + ' 第' + this.$store.state.SchoolWeek.XQ + '学期'
            // console.log(this.term)
        },
        // 设置当前周
        async setSchoolWeek() {
            let SchoolWeek = await this.$store.dispatch('getSchoolWeek')
            this.$store.commit('SET_SchoolWeek', SchoolWeek.result)
            let zc = this.$route.params.week ? this.$route.params.week : this.$store.state.SchoolWeek.ZC
            this.week = Number(zc)
        },
        // 获取明细列表
        async setWeekPlan(SchoolWeek) {
            this.loading = true
            let zc = this.$route.params.week ? this.$route.params.week : this.$store.state.SchoolWeek.ZC
            let WeekPlan = await this.$store.dispatch('getWeekPlan', {
                userID: this.userTeaID,
                XN: this.xuenian,
                XQ: this.xueqi,
                ZC: Number(zc),
                flag: 1
            })
            this.$store.commit('SET_WeekPlan', WeekPlan.result)
            // this.time = this.$store.state.WeekPlan.SCHOOL_TIME.NAME
            this.loading = false
        },
        changeModal(day) {
            this.day = day
            this.modal ? this.modal = false : this.modal = true
        },
        ok() {
            if (!this.isClick) {
                this.isClick = true
                this.$store.dispatch('remarkDay', {
                    'remark_content': this.beizhu,
                    'user_id': this.$store.state.userInfo.USER_ID,
                    'to_user_id': this.$store.state.userInfo.USER_ID,
                    day: this.day
                }).then(res => {
                    this.isClick = false
                    if (res.data.status === 0) {
                        this.$store.state.WeekPlan.PLAN_LIST[this.$route.params.index][2].REMARK_CONTENT = this.beizhu
                        // this.info[2].REMARK_CONTENT = this.beizhu
                    } else {
                        this.$Message.error(res.data.msg)
                    }
                })
            }
        }
    },
    created() {
        // const Vm = this
        // Vm.loading = true
        // Vm.userTeaID = sessionStorage.getItem('teaId')
        // async function step() {
        //     await Vm.setSchoolWeek()
        //     await Vm.setSchoolWeekList()
        //     let zc = Vm.$route.params.week ? Vm.$route.params.week : Vm.$store.state.SchoolWeek.ZC
        //     let SchoolWeek = {
        //         XN: Vm.$store.state.SchoolWeek.XN,
        //         XQ: Vm.$store.state.SchoolWeek.XQ,
        //         ZC: Number(zc)
        //     }
        //     Vm.term = SchoolWeek.XN + ' 第' + SchoolWeek.XQ + '学期'
        //     Vm.xuenian = Vm.$store.state.SchoolWeek.XN
        //     Vm.xueqi = Vm.$store.state.SchoolWeek.XQ
        //     // Vm.week = SchoolWeek.ZC
        //     await Vm.setWeekPlan(SchoolWeek)
        //     let PL = Vm.$store.state.WeekPlan.PLAN_LIST
        //     if (PL[0][0].SIGN_STATUS === 3 && PL[0][1].SIGN_STATUS === 3 &&
        //         PL[1][0].SIGN_STATUS === 3 && PL[1][1].SIGN_STATUS === 3 &&
        //         PL[2][0].SIGN_STATUS === 3 && PL[2][1].SIGN_STATUS === 3 &&
        //         PL[3][0].SIGN_STATUS === 3 && PL[3][1].SIGN_STATUS === 3 &&
        //         PL[4][0].SIGN_STATUS === 3 && PL[4][1].SIGN_STATUS === 3) {
        //         Vm.nodata = true
        //     }
        //     Vm.loading = false
        // }
        // this.$store.dispatch('isUserInfo').then(res => {
        //     step()
        // })
    }
}
</script>

<style lang="less">
.reco-content {
    width: 100%;
    display: flex;
    flex-direction: column; // overflow-x: hidden;
    /* align-items: center; */
}

.content-top {
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to left, #209cff 0%, #68e0cf 100%);
    color: #fff;
    font-size: 16px;
}

.reco-select {
    // width: 100%;
    padding: 15px; // height: 50px;
    background-color: #fff;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.reco-option {
    // margin: 10px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
}

.reco-notes {
    margin-top: 15px;
    padding: 20px 25px;
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.notes-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(238, 238, 238, 0.4);
    .timeLeft {
        font-size: 14px;
        color: #232323;
    }
    .timeRight {
        font-size: 16px;
        color: #0093dd;
    }
}

.content-item {
    // height: 60px;
    // width: 100%;
    padding: 8px 0;
    display: flex;
    flex-direction: column; // align-items: center;
    justify-content: center;
}

.item-date {
    // height: 30px;
    width: 50px;
    padding: 2px;
    border-radius: 3px; // word-wrap: break-word; 
    // letter-spacing: 10px;
    background-color: #0093dd;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-note {
    // height: 60px;
    width: 100%;
    margin-left: 2px;
    display: flex;
    flex-direction: column; // justify-content: center;
    flex-wrap: nowrap;
}

.itemNote-item {
    display: flex; // justify-content: space-between;
    // flex-direction: column;
    align-items: center;
    margin: 5px 0;
    font-size: 14px;
    color: #232323;
    span {
        margin-left: 8px;
    }
}

.itemNote-itemLeft-d {
    padding: 4px 10px;
    // background-color: #0093dd;
    color: #000;
    border-radius: 3px;
    text-align: center;
}

.itemNote-itemRight-d {
    margin-left: 5px;
}

.item-mark {
    padding: 10px 5px;
    overflow: hidden;
    word-wrap: break-word;
    color: #999999;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid rgba(238, 238, 238, 0.78);
}

.btn-mark {
    padding: 10px 5px;
    font-size: 14px;
    color: #0093dd;
    text-align: center;
}

.card-nodata {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    img {
        height: 80px;
    }
    div {
        margin: 20px 10px 0 0;
        color: #999999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
